//引入帮我们实现单页面应用的第三方包
import SMERouter from 'sme-router'

// 引入模板
import index from '@v'
import login from '@v/login'
import adminList from '@v/adminList'
import advList from '@v/advList'

// 实例化配置前端路由规则的路由对象
// 传入index.html中用于渲染各个页面的节点id
const router = new SMERouter('root', 'html5')
// 注意: 我们的代码使用了模块化,每一个js文件都是一个单独的模块.当前模块的变量,都是局部变量.全局如果要使用.则手动暴露到全局
window.router = router
// 配置前端路由规则:
router.route('/login', function (req, res) {
  // 当浏览器地址栏的路径为/login时,这个回调函数会执行
  // req对象可以获取到一些参数
  // res对象可以帮我们配置前端路由规则中某个路径所对应的视图结构
  // render中要传入字符串,字符串是啥.路径为/login时,展示的就是啥
  // login函数调用的实参,就是要传入到模板中的数据
  res.render(login({ name: '海静' }))
})
router.route('/index', function (req, res, next) {
  // console.log(res.subRoute())
  // console.log(location, req)
  // 注意: 如果要在/index里面渲染二级路由,就要按照下面的方式去写
  next(
    index({
      url: req.url, //将当前浏览器地址栏的路径传入到index模板中
      subRoute: res.subRoute(), // res.subRoute() ==> <div id="__sub-route-view"></div> 这个标签用来渲染二级路由的结构
    })
  )
})

// 定义/index下面的嵌套路由
router.route('/index/advList', function (req, res) {
  res.render(advList())
})
router.route('/index/adminList', function (req, res) {
  res.render(adminList())
})
